highQuery - פריימוורק עיצובי חזק ומהיר ! מעכשיו לעצב את כל האתר במינימום קוד ! (ללא ידע מוקדם בשפות צד שרת \ JS)
ובמדריך הנ"ל : עבודה עם טפסים חלק א' . ניגע בנושאים הבאים : select, radio ו-switch.
אהלן.
מדריך ראשון : הקדמה
מדריך שני : תפריט ניווט עליון
בואו נתחיל ישר לעבוד .
כמו שדיברנו במדריכים הקודמים , השימוש כאן הוא בעיקר ולרוב במעטפת Div .
גם האלמנטים שירכיבו בסופו של תהליך את הטפסים יהיו מורכבים מDivים .
אל דאגה! הטפסים ימשיכו להשתייך לPHP על ידי המשתנה הגלובאלי $_POST ממש כמו אינפוט רגיל
נבדוק זאת בהמשך על ידי הקוד הבסיסי הבא :
var_dump($_POST);
//או
print_r($_POST);
//או
print_r($_POST);
select :
נגדיר את הdata-roll כselect (הסבר על התכונה הזו קיים במדריך הקודם - #2) .
נגדיר את הערך scroll (שמקבל רק true\false) כדי לקבל \ לא לקבל פס גלילה (הפס גלילה מעוצב, ממש כמו פס גלילה בJQuery רגיל )
נגדיר את הname (השם) כדי שנוכל בעתיד לשייך אותו למשתנה הגלובאלי $_POST .
נגדיר את הplaceholder שהוא גם כמו באינפוט רגיל , הטקסט שיוצג למשתמש על הסלקט . הוא לא אפשרות ( ואם יבחר או שהמשתמש השאיר את זה כברירת מחדל הערך של הפוסט שלו יהיה null כי לא הוגדר לו דבר . )
עד כאן המעטפת .
אנו צריכים לקבל קוד כזה בערך :
<div data-roll="select" scroll="false" name="selector" placeholder="Choose ...">
</div>
</div>
עכשיו כדי להוסיף אפשרויות נפתח תג ul ובתוכו כמה תגי li שכל תג מסמל שורה לבחירה .
נגדיר לכל li את הrel שלה כלומר את הערך שלה , במקרה שנרצה לעבוד עם PHP .
הקוד שלנו אמור להיראות עכשיו ככה :
<div data-roll="select" scroll="false" name="selector" placeholder="Choose ...">
<ul>
<li rel="Option 1">Option 1</li>
<li rel="Option 2">Option 2</li>
<li rel="Option 3">Option 3</li>
</ul>
</div>
<ul>
<li rel="Option 1">Option 1</li>
<li rel="Option 2">Option 2</li>
<li rel="Option 3">Option 3</li>
</ul>
</div>
נפתח את הדפדפן ונקבל את התוצאה הבאה :
(האפור על האפשרות השלישית זה העכבר שעומד עליה , אבל המחשב שלי לא מכניס אותו לצילום מסך .. (: )
ואם ניתן לscroll ערך true - כלומר שיהיה ניתן לגלול
זה יראה בערך ככה (אני נותן את השורה הראשונה כי היא היחידה שמשתנה כאן .)
<div data-roll="select" scroll="true" name="selector" placeholder="Choose ...">
</div>
</div>
והתוצאה כזאת :
(שוב : העכבר נמצא על הפס הגלילה ולכן הוא נראה . שהעכבר לא עליו הפס גלילה נעלם . )
radio :
לאחר שהעיקרון הובן , נוכל להריץ כאן קצת את הקצב .
נגדיר את הdata-roll כ-radio-group .
נגדיר את הname כדי שנוכל לשייך את זה לPHP .
יראה ככה :
<div data-roll="radio-group" name="radiogroup">
</div>
</div>
נפתח בתוך הDiv תג ul שבתוכו נפתח כמה תגי li - אחד לכל כפתור רדיו .
נגדיר לli את ה-rel (כמו מקודם , הערך שלו במידה ונירצה לעבוד עם PHP)
ועוד דבר חשוב :
נגדיר class בתור checked לכפתור רדיו שנרצה שיסומן כברירת המחדל . (דומה לכפתור רדיו בHTML רגיל...)
בשילוב של כל הקוד הנ"ל נקבל דבר כזה :
<div data-roll="radio-group" name="radiogroup">
<ul>
<li class="checked" rel="one">Option 1</li>
<li rel="two">Option 2</li>
<li rel="three">Option 3</li>
</ul>
</div>
<ul>
<li class="checked" rel="one">Option 1</li>
<li rel="two">Option 2</li>
<li rel="three">Option 3</li>
</ul>
</div>
והתוצאה היא :
switch :
נגדיר את הdata-roll כ-switch.
נגדיר את הname כדי שנוכל לשייך את זה לPHP .
יראה ככה :
<div data-roll="switch" name="switcher">
</div>
</div>
נפתח בתוך הDiv תג ul שבתוכו נפתח 2 תגי li בלבד - אחד לכל אפשרות .
נגדיר לli את ה-rel (כמו מקודם , הערך שלו במידה ונירצה לעבוד עם PHP)
ועוד דבר חשוב :
נגדיר class בתור checked ללחצן שנרצה שיסומן כברירת המחדל .
ונגדיר גם בclass את הצבע . אפשר blue\gray בלבד (לפחות בינתיים...) . חובה להוסיף את הצבע לקלאס ! (אחרת יצא משהו ממש מכוער ... )
הקוד המלא יראה ככה :
<div data-roll="switch" name="switcher">
<ul>
<li class="blue checked" rel="y">Yes</li>
<li class="gray" rel="n">No</li>
</ul>
</div>
<ul>
<li class="blue checked" rel="y">Yes</li>
<li class="gray" rel="n">No</li>
</ul>
</div>
והתוצאה אמורה לצאת ככה :
(פעם אחת הכחול נלחץ , ובפעם השניה האפור נלחץ . )
חשוב לציין שהמעבר בswitch קורה בדרך ממש יפה , בשילוב JQuery ממש כמו לחצן אמיתי :)
תנסו ותראו :)
עד כאן המדריך השלישי על הפריימוורק HighQuery .
בהצלחה .
ובמדריך הבא : חלק ב' של טפסים . נעבוד על range, אינפוטים חכמים למיניהם וכפתורים .
תגובות לכתבה:
מדהים :))
כל הכבוד על הפרסומים, על פסקאות ועיצוב נוח לקריאה
וכמובן על המידע השימושי :)
@intval
תודה רבה !
במדריך הבא ידבר על אינפוטים . וישנם פיצ'רים כמו לבדוק האם אינפוט כלשהוא שווה לאינפוט אחר (בשביל אימות סיסמא לדוגמא), לקבוע שאינפוט מסויים יהיה חייב להכיל טקסט לפני שהטופס ישלח ,אינפוט של סיסמא שמראה רק את התו האחרון שהוכנס לרגע ואז הופך אותו לכמו באינפוט סיסמא רגיל (קורה לי המון שאני מכניס סיסמא ולא בטוח אם הקפס-לוק דלוק \ לא . ובעזרת הפיצ'ר הזה זה אפשרי ... ) ועוד ועוד :)
אני לא יודע אם זה כזה נכון לכתוב ככה טפסים..
כאילו פריימוורקים של טפסים, צריכים לקחת את ה-select האורגינל, ולעצב אותו.. ולא שצריכים לרשום HTML והוא יהפוך ל-SELECT... וכן הדבר ב-checkbox, radio...
KingYes +1
אני חייב לציין, אני מת על הFRAMEWORK הזה :)
חוסך הרבה מאוד זמן עבודה
אולי אני אחזור וימשיך לפרסם לו עוד מדריכים ...
לבנתיים עד שתחזור להמשיך את המדריכים שלך
מי שרוצה יש פה דוגמאות מעולות http://itv-keepfree.com/jQuery/
כמה שאני שונא פריימו'ורק צד לקוח שלוקח את הסמנטיקה של HTML וזורק אותה לפח.
@LighTo273 לא חבל לבזבז את זמן ולהשתמש במשהו שיחסוך זמן?
@LighTo273 נכון! 1+
@ilikeme עדיף לעשות משהו שפשוט יקח לדוגמא כל אלמנט select קיים ויהפוך אותו למה שהוא ירצה..
ככה הרוב עושים
@dekelyi, אבל למה שאני אעשה אחד משלי אם יש כבר אחד מוכן? לא חבל על הזמן? :P
אני (אם זה היה כל כך חשוב לי/אם לא היו אחרים יותר טובים) הייתי עושה שכבה שמוצאת את כל אלמנטי הselect ומחליפה אותם בתגים של הhighquery
גם זה לא נבון. זה לעבוד על עצמך. :-)
רק לעתים רחוקות אני חושב שמותר (לפחות בגרסת HTML הנוכחית) "לעבוד" על עצמך. (דברים כמו שורות קוד, אבל גם אז זה משתמש במשהו סמנטי, רק לא ב-<code>, שהוא המתאים ביותר.)
@ilikeme, זה בדיוק למה האינטרנט של היום נראה כמו שהוא נראה. אנשים רואים דברים מוכנים - לוקחים אותם. הם לא עוצרים לחשוב - רגע, האם זה עוקב אחר התקן? האם זה סמנטי? האם זה באמת טוב? האם אני יכול לשפר את זה?
אני פשוט רואה את זה כ-UI כמו JQUERY
פשוט אפשר גם לא להשתמש בJQUERY ולכתוב רק קוד JS בלי משהו מוכן...
והאמת היא שזה נראה משהו שחוסך עבודה (מבחינה של עיצוב...)
סליחה, אני לא רואה את JQUERY כ-UI זה לא מה שניסתי להגיד...
אני פשוט רואה את זה ככלי שימושי כמו JQUERY
@ilikeme עדיף כבר להשתמש בJQUERY UI
@dekelyi למה עדיף?
דקל איך משלבים Twitter Boostrap עם jQuery UI?
@ilikeme משתלב טוב עם JQ, יש לו API טוב ומתאים מאוד להתאמה אישית
@liorel100 איך אתה בידיוק רוצה לשלב אותו? אני לא מבין באיזה צורה בידיוק...
ואני בטוח שעם קוד ק
ואני בטוח שעם קוד קטן ופשוט אפשר לתפור כל בעיה
@dekelyi גם הפריימוורק הזה משתמש בJQuery והוא גם די נוח! (למרות שיש בעיה עם שפות RIGHT TO LEFT)
שילוב ביניהם, כלומר שהם לא יסתרו אחד את השני בענייני כפתורים וכו'.
@liorel100 פשוט קוד קצר שיתאים את JQ-UI לtheme של bootstrap
@ilikeme רק שתדע שJQ-UI הוא פריימוורק גדול ועצום בכח שלו ובלי שום בעיות של RTL/LTR ועם הרבה אפשרויות customization
מה הקוד?
@dekelyi זה לא כזה משנה :P הם שני אלו בסדר... רק ש-UI יותר גדול
כמו שאפשר להשתמש בספריה אחרת של JS לדוגמה dojo toolkit
דרך אגב, באמת ב-UI יש יותר אפשרויות מאשר HIGHQUERY אבל גם הספריה HIGHTQUERY מעולה :)